<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div>
  <h1>登录</h1>
  <input type="text" placeholder="用户名" v-model="user.username"><br>
  <input type="password" placeholder="密码" v-model="user.password"><br>
    <input type="checkbox" v-model="user.rem">记住用户名和密码<br>
  <input type="button" value="登录" @click="login()">
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>
 <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
     <script>
         let v = new Vue({
             el:"body>div",
             data:{
                 user:{
                   username:"",
                   password:"",
                     rem:false
                 }
             },
             methods:{
               login(){
                 axios.post("/login",v.user).then(function (response) {
                   if(response.data==1){
                     alert("登录成功")
                     location.href="/"
                   }else if(response.data==2) {
                     alert("密码错误")
                   }else {
                     alert("用户不存在，请注册")
                     location.href="/reg.html"
                   }
                 })
               }
             },
             created:function () {
                 let arr=document.cookie.split(";");
                 for (let cookie of arr){
                     let cookieArr=cookie.split("=");
                     let name=cookieArr[0].trim();
                     let value=cookieArr[1];
                     if(name=="username"){
                         this.user.username=value
                     }else if(name=="password"){
                         this.user.password=value
                     }
                 }

             }

         })
     </script>
</body>
</html>